CSS Selectors

In this tutorial you will learn how to use CSS selectors for applying style rules to elements.

CSS Selectors:

CSS selectors target HTML elements for applying style rules. The style rules associated with that element will be applied to the element that match the selector pattern.

Basic selectors:

Universal selector:

The universal selector is denoted by an asterisk (*). It matches all the elements on the HTML page. This selector is generally used to remove the default margins and padding etc.

Example: Try It

* {
color:red;
font-size:25px;
}

The style rules inside the * selector will be applied to every element in a document.

Note: It is recommended not to use the universal selector (*) too often in a production environment, since this selector matches every element on a web page that puts too much of unnecessary pressure on the browsers. Use element type or class selector instead.

The Element Type Selectors

An element type selector matches all the element type in the document and applies the style rules inside the selector.

Example: Try It

h1 {
    color: green;
}

The style rules inside the h1 selector will be applied on every <h1> element in the web page and color it green.

ID Selectors

The id selector is used to apply style rules for a single or unique element in the web page. It is denoted by hash sign(#) followed by the id value.

Example: Try It

#info{
color: indigo;
}

This style rule renders the text of an element in indigo, whose id attribute is set to info.

Class Selectors

The class selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule. The class selector is defined with a period sign (.) immediately followed by the class value.

Example: Try It

.blue {
    color: blue;
}

The above style rules renders the text in blue of every element in the document that has class attribute set to blue. You can make it a bit more particular.

Example: Try It

p.blue {
    color: blue;
}

The style rule inside the selector p.blue renders the text in blue of only those <p> elements that has class attribute set to blue, and has no effect on other paragraphs.

Descendant Selectors

Descendant selectors are used to apply a style rule to a particular element only when it lies inside a particular element.

Example: Try It

h1 em {
    color: green;
}

The style rules inside the selector ul.menu li a applied to only those <a> elements that contained inside an <ul> element having the class.menu, and has no effect on other links inside the document.

Similarly, the style rules inside the h1 em selector will be applied to only those <em> elements that contained inside the <h1> element and has not effect on other <em> elements.

Child selector

The child (>) selector is used to select elements that are children, or direct descendants, of the specified element.

Example: Try It

div > p {
color:red;
}
<div>
<p>My text is red</p>
<section>
<p>My text is not red</p>
</section>
</div>

The above CSS selects only the first <p> element, as it is the only paragraph directly descended from a <div>. The second <p> element is not selected because it is not a direct child of the <div>.

Adjacent Sibling selector

The adjacent sibling (+) selector selects a sibling element that immediate follows a specified element.

Example: Try It

p + p {
color:red;
}
<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

The above example selects only those <p> elements which are directly preceded by another <p> element.

General Sibling selector

The general sibling (~) selector selects all siblings that follow the specified element.

Example: Try It

p ~ p {
color:red;
}
 <p>My text is not red </p>
 <p>My text is red </p>
 <hr>
 <h1>And now a title </h1>
 <p>My text is red </p>

The above example selects all <p> elements that are preceded by another <p> element, whether or not they are immediately adjacent.